<template>
  <scroll-view
    scroll-y="true"
    class="pageContainer"
    :style="{ backgroundColor: pageinfo.bgcolor }"
  >
    <!-- 		<tt v-if="1" />
		<tsbanner  v-if="1"></tsbanner> -->
    <!-- `rgba(255,255,255,${opacity})` -->
    <view v-if="pageinfo.showtop == 1">
      <view
        class="top"
        :style="{
          backgroundColor: `rgba(255,255,255,1)`,
          height: navHeight + 'px',
        }"
        v-if="isShowCompanyInfo || pageinfo.toppic"
      >
        <view
          class="status-bar"
          :style="{ height: statusBarHeight + 'px' }"
        ></view>
        <view class="nav-content" :style="{ height: contentH + 'px' }">
          <view v-if="pageinfo.toppic">
            <image
              :style="{
                width: `100vw`,
                height: contentH + 'px',
              }"
              class="top-pic"
              :src="pageinfo.toppic"
              mode="aspectFill"
            ></image>
          </view>
          <view v-else class="logo-container">
            <image class="logo" :src="initdata.logo" mode="aspectFill"></image>
            <!-- <view class="company-info">
						<text class="company-name" :style="{ color: textColor }">{{ initdata.name
						}}</text>
						<text class="company-desc" :style="{ color: descColor }">{{ initdata.desc
						}}</text>
					</view> -->
            <view class="company-info">
              <text class="company-name" style="color: #333">{{
                initdata.name
              }}</text>
              <text class="company-desc" style="color: #333">{{
                initdata.desc
              }}</text>
            </view>
          </view>
        </view>
      </view>

      <view
        class="top"
        :style="{
          backgroundColor: `rgba(255,255,255,0)`,
          height: navHeight + 'px',
        }"
        v-else
      >
        <view
          class="status-bar"
          :style="{ height: statusBarHeight + 'px' }"
        ></view>
        <view class="nav-content" :style="{ height: contentH + 'px' }">
          <view v-if="pageinfo.toppic">
            <image
              class="top-pic"
              :style="{
                width: `100vw`,
                height: contentH + 'px',
              }"
              :src="pageinfo.toppic"
              mode="aspectFill"
            ></image>
          </view>
          <view v-else class="logo-container">
            <image class="logo" :src="initdata.logo" mode="aspectFill"></image>
            <!-- <view class="company-info">
						<text class="company-name" :style="{ color: textColor }">{{ initdata.name
						}}</text>
						<text class="company-desc" :style="{ color: descColor }">{{ initdata.desc
						}}</text>
					</view> -->
            <view class="company-info">
              <text class="company-name" style="color: #fff">{{
                initdata.name
              }}</text>
              <text class="company-desc" style="color: #fff">{{
                initdata.desc
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <dp
      :pagecontent="pagecontent"
      :menuindex="menuindex"
      :windowBarH="windowBarH"
      :contentH="contentH"
      @getdata="getdata"
    ></dp>

    <!--秒杀-->
    <view
      class="must-product flex-col"
      v-if="0 && seckill_list.list.length > 0"
    >
      <view
        class="must-more flex-row justify-between align-center"
        :style="{ background: t('color1') }"
      >
        <view class="image-text_6 flex-row">
          <view class="text-group_6 flex-row">
            限时抢购
            <view class="seckill-time">
              <text>{{ seckill_list.seckill_time }}点场</text>
            </view>
          </view>
        </view>
        <text class="text_5" @tap="goto" data-url="/pagesExt/seckill/index"
          >更多 ></text
        >
      </view>
      <view class="seckill-list">
        <view class="flex-row">
          <view
            class="seckill-item"
            v-if="index < 4"
            v-for="(item, index) in seckill_list.list"
            :key="index"
            @click="goto"
            :data-url="'/pagesExt/seckill/product?id=' + item.id"
          >
            <view class="seckill-product-pic">
              <image class="image" :src="item.pic" mode="widthFix" />
            </view>
            <view class="seckill-product-info flex-col justify-between">
              <view class="text_dist" :style="{ color: t('color1') }"
                >￥{{ item.sell_price }}</view
              >
              <view class="text_name market_price"
                >￥{{ item.market_price }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--活动推荐-->
    <view class="must-product flex-col" v-if="0 && recommend_list.length > 0">
      <view
        class="must-more flex-row justify-between align-center"
        :style="{ background: t('color1') }"
      >
        <view class="image-text_6 flex-row justify-between align-center">
          <text class="text-group_6">活动推荐</text>
        </view>
        <text class="text_5" @tap="goto" data-url="/pagesExt/shop/phot?type=2"
          >更多 ></text
        >
      </view>
      <view class="must-list">
        <view
          style="
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-between;
          "
        >
          <view
            class="must-item"
            v-for="(item, index) in recommend_list"
            :key="index"
            @click="goto"
            :data-url="'/pages/shop/product?id=' + item.id"
          >
            <view class="product-pic">
              <image class="image" :src="item.pic" mode="widthFix" />
            </view>
            <view class="product-info flex-col justify-between">
              <view class="text_name">{{ item.name }}</view>
              <view class="text_dist" :style="{ color: t('color1') }"
                >￥{{ item.sell_price }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--独特爆款-->
    <view class="must-product flex-col" v-if="0 && hot_list.length > 0">
      <view
        class="must-more flex-row justify-between align-center"
        :style="{ background: t('color1') }"
      >
        <view class="image-text_6 flex-row justify-between align-center">
          <text class="text-group_6">独特爆款</text>
        </view>
        <text class="text_5" @tap="goto" data-url="/pagesExt/shop/phot?type=1"
          >更多 ></text
        >
      </view>
      <!--<view class="must-list">
					<scroll-view scroll-x >
						<view class="flex-row">
							<view class="must-item" v-for="(item,index) in hot_list" :key="index"  @click="goto" :data-url="'/pages/shop/product?id='+item.id">
								<view class="product-pic">
									<image class="image" :src="item.pic" mode="widthFix" />
								</view>
								<view class="product-info flex-col justify-between">
									<view class="text_name">{{item.name}}</view>
									<view class="text_dist" :style="{color:t('color1')}">￥{{item.sell_price}}</view>
								</view>
							</view>
						</view>
					</scroll-view >
				</view>-->
      <view class="must-list">
        <view
          style="
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: space-between;
          "
        >
          <view
            class="must-item"
            v-for="(item, index) in hot_list"
            :key="index"
            @click="goto"
            :data-url="'/pages/shop/product?id=' + item.id"
          >
            <view class="product-pic">
              <image class="image" :src="item.pic" mode="widthFix" />
            </view>
            <view class="product-info flex-col justify-between">
              <view class="text_name">{{ item.name }}</view>
              <view class="text_dist" :style="{ color: t('color1') }"
                >￥{{ item.sell_price }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

   <view class="must-product flex-col">
      <view class="must-more flex-row justify-between align-center"> </view>
    </view>

    <view v-if="copyright != ''" class="copyright">{{ copyright }}</view>
    <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
    <loading v-if="loading"></loading>
    <!-- <dp-guanggao :guanggaopic="guanggaopic" :guanggaourl="guanggaourl" :guanggaovideo="guanggaovideo"
			:closeTime="closeTime" :isguanggaovideoauto="isguanggaovideoauto" :isguanggaovideo="isguanggaovideo"
			:isguanggao="isguanggao" v-if="isguanggao || isguanggaovideo"></dp-guanggao> -->

    <te-popups></te-popups>

    <!-- <small-window :topPx="200">
      <image
        style="width: 200rpx; height: 200rpx"
        :src="static_url + '/static/img/moneylog.png'"
      >
      </image
    ></small-window> -->

    <button class="kefu-container" open-type="contact" v-if="showkefu">
      <image class="kefu" :src="static_url + '/static/img/kefu_icon.png'" />
    </button>
    <!-- <view class="kefu-container">
			<image class="kefu" @click="openkefu" :src="static_url + '/static/img/kefu_icon.png'" />
			<view v-if="totalUnreadCount > 0" class="unread-badge">
				{{ totalUnreadCount > 99 ? '99+' : totalUnreadCount }}
			</view>
		</view> -->
    <!-- 回到顶部按钮-->
    <image
      v-if="showBackTop"
      class="back-to-top"
      :src="static_url + '/static/img/backTop.png'"
      @click="backToTop"
    >
    </image>

    <uni-popup ref="popup" type="bottom" border-radius="20rpx">
      <view class="pop_kefu">
        <view class="pop_kefulist" v-if="kefuList.length > 0">
          <view
            v-for="(item, index) in kefuList"
            :key="index"
            @click="tokefu(item)"
            class="pop_list_item"
          >
            <image class="pic" :src="item.headimg" mode="aspectFill"></image>
            <view class="name">{{ item.nickname }}</view>
            <view v-if="item.no_read_count > 0" class="badge">
              {{ item.no_read_count > 99 ? "99+" : item.no_read_count }}
            </view>
          </view>
        </view>
        <view class="load_kefu" v-else>
          <uni-load-more status="loading" iconSize="28"></uni-load-more>
        </view>
      </view>
    </uni-popup>
  </scroll-view>
</template>
<script>
var app = getApp();
export default {
  data() {
    return {
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      platform: app.globalData.platform,
      homeNavigationCustom: app.globalData.homeNavigationCustom,
      navigationBarBackgroundColor: app.globalData.navigationBarBackgroundColor,
      navigationBarTextStyle: app.globalData.navigationBarTextStyle,
      initdata: null,
      id: 0,
      pageinfo: [],
      pagecontent: [],
      sysset: {
        mode: 0,
      },
      title: "",
      copyright: "",
      latitude: "",
      longitude: "",
      area: "",
      statusBarHeight: 20,
      screenWidth: 375,
      hot_list: [],
      recommend_list: [],
      seckill_list: {
        list: [],
      },
      windowBarH: 0,
      contentH: 0,
      guanggaopic: "",
      guanggaourl: "",
      isguanggao: 0,
      guanggaovideo: "",
      isguanggaovideo: 0,
      closeTime: 0,
      isguanggaovideoauto: 0,
      opacity: 0,
      navHeight: 0,
      scrollTop: 0,
      isShowCompanyInfo: false,
      tabsOriginalTop: null,
      showBackTop: false, // 控制回到顶部按钮的显示
      kefuList: [],
      totalUnreadCount: 0,
      showkefu: "",
    };
  },
  computed: {
    // 计算文字颜色
    // textColor() {
    // 	return this.opacity >= 0.3 ? '#333' : '#fff'
    // },
    // // 计算描述文字颜色
    // descColor() {
    // 	return this.opacity >= 0.3 ? '#666' : '#fff'
    // }
  },
  mounted() {
    let that = this;
    uni.$on("scrollLast", (data) => {
      if (data) {
        that.scrollToTarget(data.target);
      }
    });
  },
  onLoad: function (opt) {
    // 获取窗口信息
    const windowInfo = uni.getWindowInfo();
    // 获取系统信息
    const systemInfo = {
      statusBarHeight: windowInfo.statusBarHeight,
      screenWidth: windowInfo.screenWidth,
      windowWidth: windowInfo.windowWidth,
      windowHeight: windowInfo.windowHeight,
      pixelRatio: windowInfo.pixelRatio,
    };

    let menuButtonInfo;
    try {
      menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    } catch (e) {
      console.log("获取胶囊按钮信息失败", e);
      // 设置默认值
      menuButtonInfo = {
        height: 32,
        top: systemInfo.statusBarHeight + 12,
      };
    }

    // 如果获取不到胶囊信息，使用默认值
    if (!menuButtonInfo || !menuButtonInfo.top) {
      menuButtonInfo = {
        height: 32,
        top: systemInfo.statusBarHeight + 12,
      };
    }

    this.statusBarHeight = systemInfo.statusBarHeight;
    this.contentH =
      (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
      menuButtonInfo.height +
      5;
    this.navHeight = systemInfo.statusBarHeight + this.contentH;

    this.windowBarH = systemInfo.statusBarHeight;
    this.screenWidth = systemInfo.screenWidth;

    //原有的onLoad代码
    this.opt = app.getopts(opt);
    var cachearea = app.getCache("user_current_area");
    var cacheshowarea = app.getCache("user_current_area_show");
    var cachelongitude = app.getCache("user_current_longitude");
    var cachelatitude = app.getCache("user_current_latitude");
    if (cachelongitude && (cachearea || cachearea != 1)) {
      this.area = cachearea;
      this.curent_address = cacheshowarea;
      this.latitude = cachelatitude;
      this.longitude = cachelongitude;
    }

    var mendianid = app.getCache("user_selected_mendianid");

    if (mendianid) {
      this.mendianid = mendianid;
    }
    app.globalData.indexTab = [];
    app.globalData.tabList = [];
    app.globalData.isTabCanTop = "";
    this.getdata();
    var mid = uni.getStorageSync("mid");
    this.showkefu = mid;
    if (mid) {
      this.getkefulist();
    }
  },
  onShow: function (opt) {
    this.mid = app.globalData.mid;
    if (this.needRefreshMyaddress) {
      this.getMyAddress();
      that.needRefreshMyaddress = false;
    }
  },
  onPullDownRefresh: function (e) {
    if (!this.show_nearbyarea && !this.isshowmendianmodal) {
      this.getdata();
    }
    if (uni.getStorageSync("mid")) {
      this.getkefulist();
    }
  },
  onPageScroll: function (e) {
    // 处理顶部导航栏背景色渐变
    this.scrollTop = e.scrollTop;
    // 在50px的滚动距离内完成渐变，让效果更快显现
    // let opacity = this.scrollTop / 50;
    // this.opacity = Math.min(1, Math.max(0, opacity));
    this.showBackTop = this.scrollTop > 500;
    if (this.scrollTop >= 10) {
      this.isShowCompanyInfo = true;
    } else {
      this.isShowCompanyInfo = false;
    }

    uni.$emit("scrollY", {
      scrollTop: this.scrollTop,
      navHeight: this.navHeight,
    });
  },
  // options: {
  //        styleIsolation: 'shared'
  // },
  methods: {
    scrollToTarget(target, options = {}) {
      const { duration = 300, offset = 0 } = options;

      // 方案 1：使用 uni.pageScrollTo（适用于页面滚动）
      uni.pageScrollTo({
        scrollTop: target, // 目标位置（单位：px）
        duration, // 滚动时长（单位：ms）
        success: () => {
          console.log("index滚动", target);
        },
        fail: (err) => {
          // console.error('滚动失败:', err);
        },
      });

      // 方案 2：使用 scroll-view 的 scroll-into-view（适用于组件内部滚动）
      // 需要目标元素设置 id
      if (this.$refs.scrollView) {
        this.$refs.scrollView.scrollIntoView(target, {
          duration,
          offset,
        });
      }
    },

    toBusiness() {
      var url = "/pagesExt/business/clist2";
      var backurl = encodeURIComponent("/pages/index/index");
      app.goto(url + "?isindex=1&backurl=" + backurl);
    },
    getdata: function () {
      app.showLoading("加载中");
      var that = this;
      var opt = this.opt;
      var id = 0;
      if (opt.select_bid) {
        var select_bid = opt.select_bid;
        app.setCache("select_bid", select_bid);
      } else {
        var select_bid = app.getCache("select_bid");
      }

      if (opt && opt.id) {
        id = opt.id;
      }
      that.loading = true;
      app.get(
        "Index/index",
        {
          id: id,
          latitude: that.latitude,
          longitude: that.longitude,
          area: that.area,
          select_bid: select_bid,
          pid: app.globalData.pid,
          mendian_id: that.mendianid,
        },
        function (data) {
          that.loading = false;

          if (data.status == 1) {
            var pagecontent = data.pagecontent;
            that.title = data.pageinfo.title;

            that.pageinfo = data.pageinfo;
            that.pagecontent = data.pagecontent;
            that.copyright = data.copyright;
            that.sysset = data.sysset;
            that.hot_list = data.hot_list;
            that.recommend_list = data.recommend_list;
            that.seckill_list = data.seckill_list;
            console.log("---开屏广告");
            that.guanggaopic = data.guanggaopic;
            that.guanggaourl = data.guanggaourl;
            that.isguanggao = data.isguanggao;
            that.guanggaovideo = data.guanggaovideo;
            that.isguanggaovideo = data.isguanggaovideo;
            that.closeTime = Number(data.closeTime);
            that.isguanggaovideoauto = data.isguanggaovideoauto;
            that.initdata = data._initdata
              ? data._initdata
              : app.globalData.initdata;
            app.globalData.memberinfo = data.memberinfo;
            uni.setNavigationBarTitle({
              title: data.pageinfo.title,
            });
            that.loaded();
            app.showLoading(false);
          } else {
            app.showLoading(false);
            if (data.msg) {
              app.alert(data.msg, function () {
                if (data.url) app.goto(data.url);
              });
            } else if (data.url) {
              app.goto(data.url);
            } else {
              console.log("您无查看权限", data);
              app.alert("您无查看权限");
            }
          }
        }
      );
    },
    showsubqrcode: function () {
      this.$refs.qrcodeDialog.open();
    },
    closesubqrcode: function () {
      this.$refs.qrcodeDialog.close();
    },
    changePopupAddress: function (status) {
      this.xdata.popup_address = status;
    },
    setMendianData: function (data) {
      this.mendian_data = data;
    },
    //头部定位start
    checkLocation: function () {
      var that = this;
      if (!loc_area_type) {
        loc_area_type = 0;
      }
      if (!loc_range_type) {
        loc_range_type = 0;
      }
      var loc_area_type = that.sysset.loc_area_type;
      var loc_range_type = that.sysset.loc_range_type;
      var loc_range = that.sysset.loc_range;
      var cache_loc_area_type = app.getCache("loc_area_type");
      var cache_loc_range_type = app.getCache("loc_range_type");
      var cache_loc_range = app.getCache("loc_range");
      var cachearea = app.getCache("user_current_area");
      var cacheshowarea = app.getCache("user_current_area_show");
      //缓存为空 或 显示城市和当前地址切换 或 同城和自定义范围切换 或 显示距离发生变化
      if (
        !cacheshowarea ||
        (cacheshowarea &&
          (cache_loc_area_type != loc_area_type ||
            cache_loc_range_type != loc_range_type ||
            cache_loc_range != loc_range))
      ) {
        app.getLocation(function (res) {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
          //如果从当前地址切到当前城市，则重新定位用户位置
          app.post(
            "Address/getAreaByLocation",
            {
              latitude: that.latitude,
              longitude: that.longitude,
            },
            function (res) {
              if (res.status == 1) {
                app.setCache("loc_area_type", loc_area_type);
                app.setCache("loc_range_type", loc_range_type);
                app.setCache("loc_range", loc_range);
                app.setCache(
                  "user_current_longitude",
                  that.longitude,
                  that.cacheExpireTime
                );
                app.setCache(
                  "user_current_latitude",
                  that.latitude,
                  that.cacheExpireTime
                );
                app.setCache(
                  "user_current_area",
                  res.province + "," + res.city,
                  that.cacheExpireTime
                );
                that.area = res.province + "," + res.city;
                if (loc_area_type == 0) {
                  that.curent_address = res.city;
                  app.setCache(
                    "user_current_area_show",
                    res.city,
                    that.cacheExpireTime
                  );
                  that.getdata();
                } else if (loc_area_type == 1) {
                  that.curent_address = res.landmark;
                  app.setCache(
                    "user_current_area_show",
                    res.landmark,
                    that.cacheExpireTime
                  );
                  that.refreshNearbyPlace();
                  that.getdata();
                } else {
                  return;
                }
              }
            }
          );
        });
      }
    },
    initCityAreaList: function () {
      var that = this;
      //地区加载
      if (that.arealist.length == 0) {
        uni.request({
          url: app.globalData.static_url + "/static/area.json",
          data: {},
          method: "GET",
          header: {
            "content-type": "application/json",
          },
          success: function (res2) {
            if (that.showlevel < 3) {
              var newlist = [];
              var arealist = res2.data;
              for (var i in arealist) {
                var item1 = arealist[i];
                if (that.showlevel == 2) {
                  var children = item1.children; //市
                  var newchildren = [];
                  for (var j in children) {
                    var item2 = children[j];
                    item2.children = []; //去掉三级-县的数据
                    newchildren.push(item2);
                  }
                  item1.children = newchildren;
                } else {
                  item1.children = []; ////去掉二级-市的数据
                }
                newlist.push(item1);
              }
              that.arealist = newlist;
            } else {
              that.arealist = res2.data;
            }
          },
        });
      }
    },
    areachange: function (e) {
      var that = this;
      const value = e.detail.value;
      var area_name = [];
      var showarea = "";
      for (var i = 0; i < that.showlevel; i++) {
        area_name.push(value[i].text);
        showarea = value[i].text;
      }
      that.area = area_name.join(",");
      that.curent_address = showarea;
      //全局缓存
      app.setCache("user_current_area", that.area, that.cacheExpireTime);
      app.setCache("user_current_area_show", showarea, that.cacheExpireTime);
      if (that.sysset.loc_area_type == 0) {
        //获取地址中心地标
        app.post(
          "Address/addressToZuobiao",
          {
            address: area_name.join(""),
          },
          function (resp) {
            that.loading = false;
            if (resp.status == 1) {
              that.latitude = resp.latitude;
              that.longitude = resp.longitude;
              app.setCache(
                "user_current_longitude",
                that.longitude,
                that.cacheExpireTime
              );
              app.setCache(
                "user_current_latitude",
                that.latitude,
                that.cacheExpireTime
              );
              that.getdata();
            } else {
              app.error("地址解析错误");
            }
          }
        );
      }
    },
    closeNearbyBox: function () {
      this.show_nearbyarea = false;
    },
    showNearbyBox: function () {
      var that = this;
      this.show_nearbyarea = true;
      this.placekeyword = "";
      this.suggestionplacelist = [];
      var nearbylist = app.getCache("user_nearby_placelist");
      if (nearbylist && nearbylist.length > 0) {
        this.nearbyplacelist = nearbylist;
      }
      //获取我的收货地址
      if (app.globalData.mid) {
        that.loading = true;
        that.getMyAddress();
      }
    },
    changeAddress: function () {
      this.ischangeaddress = true;
    },
    addMyAddress: function (e) {
      this.needRefreshMyaddress = true;
      app.goto("/pages/address/addressadd?type=1");
    },
    getMyAddress: function () {
      var that = this;
      that.loading = true;
      app.post(
        "Address/address",
        {
          type: 1,
        },
        function (resp) {
          that.loading = false;
          if (resp.status == 1) {
            that.myaddresslist = resp.data;
          }
        }
      );
    },
    cancelChangeAddress: function () {
      this.ischangeaddress = false;
    },
    refreshAddress: function (e) {
      var that = this;
      that.loading = true;
      app.getLocation(
        function (res) {
          var latitude = res.latitude;
          var longitude = res.longitude;
          //请求当前地址[取商圈地址]
          app.post(
            "Address/getAreaByLocation",
            {
              latitude: latitude,
              longitude: longitude,
              type: 1,
            },
            function (resp) {
              that.loading = false;
              if (resp.status == 1) {
                that.latitude = latitude;
                that.longitude = longitude;
                var data = resp.data;
                that.curent_address = data.address_reference.landmark;
                that.nearbyplacelist = data.pois;
                app.setCache(
                  "user_current_area",
                  data.address_component.province +
                    "," +
                    data.address_component.city,
                  that.cacheExpireTime
                );
                app.setCache(
                  "user_current_area_show",
                  that.curent_address,
                  that.cacheExpireTime
                );
                app.setCache(
                  "user_current_longitude",
                  longitude,
                  that.cacheExpireTime
                );
                app.setCache(
                  "user_current_latitude",
                  latitude,
                  that.cacheExpireTime
                );
                app.setCache("user_nearby_placelist", that.nearbyplacelist);
                that.getdata();
                that.show_nearbyarea = false;
              }
            }
          );
        },
        function (res) {
          console.error(res);
        }
      );
    },
    showAllAddress: function () {
      this.isshowalladdress = this.isshowalladdress ? false : true;
    },
    chooseMyAddress: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var info = that.myaddresslist[index];
      that.curent_address = info.address;
      that.latitude = info.latitude;
      that.longitude = info.longitude;
      app.setCache(
        "user_current_area",
        info.province + "," + info.city,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_area_show",
        that.curent_address,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_longitude",
        that.longitude,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_latitude",
        that.latitude,
        that.cacheExpireTime
      );
      that.refreshNearbyPlace();
      that.getdata();
      that.show_nearbyarea = false;
    },
    chooseNearbyAddress: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var info = that.nearbyplacelist[index];
      that.curent_address = info.title;
      that.latitude = info.location.lat;
      that.longitude = info.location.lng;
      app.setCache(
        "user_current_area",
        info.ad_info.province + "," + info.ad_info.city,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_area_show",
        that.curent_address,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_longitude",
        that.longitude,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_latitude",
        that.latitude,
        that.cacheExpireTime
      );
      that.refreshNearbyPlace();
      that.getdata();
      that.show_nearbyarea = false;
    },
    chooseSuggestionAddress: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
      var info = that.suggestionplacelist[index];
      that.curent_address = info.title;
      that.latitude = info.location.lat;
      that.longitude = info.location.lng;
      app.setCache(
        "user_current_area",
        info.province + "," + info.city,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_area_show",
        that.curent_address,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_longitude",
        that.longitude,
        that.cacheExpireTime
      );
      app.setCache(
        "user_current_latitude",
        that.latitude,
        that.cacheExpireTime
      );
      that.refreshNearbyPlace();
      that.getdata();
      that.show_nearbyarea = false;
    },
    refreshNearbyPlace: function (latitude = "", longitude = "") {
      var that = this;
      if (latitude == "" && longitude == "") {
        latitude = that.latitude;
        longitude = that.longitude;
      }
      if (latitude && longitude) {
        that.loading = true;
        app.post(
          "Address/getAreaByLocation",
          {
            latitude: latitude,
            longitude: longitude,
            type: 1,
          },
          function (resp) {
            that.loading = false;
            if (resp.status == 1) {
              var data = resp.data;
              that.nearbyplacelist = data.pois;
              app.setCache("user_nearby_placelist", that.nearbyplacelist);
            }
          }
        );
      }
    },
    placekeywordInput: function (e) {
      this.placekeyword = e.detail.value;
    },
    searchPlace: function (e) {
      var that = this;
      if (that.placekeyword == "") {
        that.suggestionplacelist = [];
        return;
      }
      var cachearea = app.getCache("user_current_area");
      var cachelongitude = app.getCache("user_current_longitude");
      var cachelatitude = app.getCache("user_current_latitude");
      var region = "";
      if (cachearea) {
        var areaArr = cachearea.split(",");
        if (areaArr.length == 2) {
          region = areaArr[1];
        } else if (areaArr.length == 1) {
          region = areaArr[0];
        }
      }
      that.loading = true;
      app.post(
        "Address/suggestionPlace",
        {
          latitude: cachelatitude,
          longitude: cachelongitude,
          region: region,
          keyword: that.placekeyword,
        },
        function (resp) {
          that.loading = false;
          if (resp.status == 1) {
            that.suggestionplacelist = resp.data;
          }
        }
      );
    },
    //头部定位end

    //门店模式start
    showMendianModal: function () {
      var that = this;
      if (that.mendianlist.length > 0) {
        that.isshowmendianmodal = true;
      } else {
        app.post(
          "ApiMendian/mendianlist",
          {
            latitude: that.latitude,
            longitude: that.longitude,
          },
          function (resp) {
            that.loading = false;
            if (resp.status == 1) {
              that.mendianlist = resp.data;
              that.isshowmendianmodal = true;
            } else {
              app.error(resp.msg);
            }
          }
        );
      }
    },
    hideMendianModal: function () {
      this.isshowmendianmodal = false;
    },
    changeMendian: function (e) {
      var that = this;
      var mendianid = e.currentTarget.dataset.id;
      var index = e.currentTarget.dataset.index;
      that.mendianid = mendianid;
      that.mendian = that.mendianlist[index];
      app.setCache(
        "user_selected_mendianid",
        that.mendianid,
        that.cacheExpireTime
      );
      that.isshowmendianmodal = false;
      that.getdata();
    },
    //门店模式end

    // 回到顶部方法
    backToTop() {
      this.isShowCompanyInfo = true;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    //#region 客服相关
    openkefu() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open("top");
      this.getkefulist();
    },
    getkefulist() {
      let that = this;
      app.get("kefu/getList", {}, function (res) {
        if (res.code == 200) {
          that.kefuList = res.data;
          let totalUnread = res.data.reduce((sum, kefu) => {
            return sum + (kefu.no_read_count || 0);
          }, 0);

          that.totalUnreadCount = totalUnread;
        }
      });
    },
    tokefu(data) {
      if (data.id) {
        app.goto(
          "/pagesChat/chat/index?id=" +
            data.id +
            "&type=1&name=" +
            data.nickname +
            "&headimg=" +
            data.headimg
        );
        this.$refs.popup.close();
      }
    },
  },
};
</script>
<style lang="scss">
@import "./location.css";

.top {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  transition: background-color 0.3s;
}

.status-bar {
  width: 100%;
}

.nav-content {
  width: 100%;
  display: flex;
  align-items: center;
  // padding: 0 20rpx;
}

.logo-container {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 20rpx;
}

.logo {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.company-info {
  display: flex;
  flex-direction: column;
  margin-left: 16rpx;
}

.company-name {
  font-size: 26rpx;
  /* font-weight: bold; */
  line-height: 1.2;
  transition: color 0.3s;
}

.company-desc {
  font-size: 18rpx;
  margin-top: 4rpx;
  transition: color 0.3s;
}

/* 当背景变白时的文字颜色 */
.top[style*="background-color: rgba(255,255,255,1)"] .company-name,
.top[style*="background-color: rgba(255,255,255,1)"] .company-desc {
  color: #333;
}

/* 背景半透明时的文字颜色渐变 */
.top[style*="background-color: rgba(255,255,255,0.5)"] .company-name {
  color: #666;
}

.top[style*="background-color: rgba(255,255,255,0.5)"] .company-desc {
  color: #999;
}

.pageContainer {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  padding-bottom: 110rpx;
}

.topR {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #666;
}

.topR .btn-text {
  margin: 0 10rpx;
  color: #333;
}

.follow_topbar {
  height: 88rpx;
  width: 100%;
  max-width: 640px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  z-index: 13;
}

.follow_topbar .headimg {
  height: 64rpx;
  width: 64rpx;
  margin: 6px;
  float: left;
}

.follow_topbar .headimg image {
  height: 64rpx;
  width: 64rpx;
}

.follow_topbar .info {
  height: 56rpx;
  padding: 16rpx 0;
}

.follow_topbar .info .i {
  height: 28rpx;
  line-height: 28rpx;
  color: #ccc;
  font-size: 24rpx;
}

.follow_topbar .info {
  height: 80rpx;
  float: left;
}

.follow_topbar .sub {
  height: 48rpx;
  width: auto;
  background: #fc4343;
  padding: 0 20rpx;
  margin: 20rpx 16rpx 20rpx 0;
  float: right;
  font-size: 24rpx;
  color: #fff;
  line-height: 52rpx;
  border-radius: 6rpx;
}

.qrcodebox {
  background: #fff;
  padding: 50rpx;
  position: relative;
  border-radius: 20rpx;
}

.qrcodebox .img {
  width: 400rpx;
  height: 400rpx;
}

.qrcodebox .txt {
  color: #666;
  margin-top: 20rpx;
  font-size: 26rpx;
  text-align: center;
}

.qrcodebox .close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  padding: 8rpx;
}

.bobaobox {
  position: fixed;
  top: calc(var(--window-top) + 180rpx);
  left: 20rpx;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 30rpx;
  color: #fff;
  padding: 0 10rpx;
}

.bobaobox_bottom {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 150rpx);
  left: 0;
  right: 0;
  width: 470rpx;
  margin: 0 auto;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 30rpx;
  color: #fff;
  padding: 0 10rpx;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .bobaobox_bottom {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 150rpx);
    left: 0;
    right: 0;
    width: 470rpx;
    margin: 0 auto;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 30rpx;
    color: #fff;
    padding: 0 10rpx;
  }
}

.navigation {
  width: 100%;
  height: 64px;
  background: #fff;
  position: fixed;
  z-index: 99;
}

.navcontent {
  display: flex;
  align-items: center;
  height: 44px;
  padding-left: 10px;
}

.navcontent .topinfo {
  display: flex;
  align-items: center;
}

.navcontent .topinfoicon {
  width: 17px;
  height: 17px;
  border-radius: 4px;
}

.navcontent .topinfotxt {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
  width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.navcontent .topsearch {
  width: 150px;
  height: 32px;
  background: #f2f2f2;
  border-radius: 16px;
  color: #232323;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.navcontent .topsearch image {
  width: 14px;
  height: 15px;
  margin-right: 6px;
}

.limitText {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: #666;
}

.agent-card {
  height: auto;
  position: relative;
  color: #333;
  background-color: #fff;
  margin: 0 20rpx 10rpx;
  font-size: 24rpx;
  border-radius: 0 10rpx 10rpx 10rpx;
  overflow: hidden;
  box-shadow: 0 0 8rpx 0px rgb(0 0 0 / 30%);
}

.agent-card .row1 {
  padding: 20rpx 10rpx 20rpx 20rpx;
}

.agent-card .logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.agent-card .text {
  flex: 1;
  margin-left: 20rpx;
  color: #666;
  line-height: 180%;
}

.agent-card .right {
  align-items: center;
  padding-right: 10rpx;
}

.agent-card .title {
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.agent-card .btn {
  position: absolute;
  right: -100rpx;
  padding: 0 14rpx;
  top: 0;
  border: 1px solid #b6c26e;
  border-radius: 10rpx;
  color: #b6c26e;
}

.agent-card .img {
  margin-right: 6rpx;
  width: 30rpx;
  height: 30rpx;
}

.agent-card .img2 {
  width: 32rpx;
  height: 32rpx;
}

.grey-text {
  color: #999;
  font-weight: normal;
}

.agent-card-b view {
  line-height: 72rpx;
  font-size: 28rpx;
  color: #444;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.agent-card-b view:first-child::after {
  content: "";
  width: 1px;
  height: 28rpx;
  border-right: 1px solid #444;
  position: absolute;
  right: 0;
}

/* 多商户切换 */
.header {
  position: relative;
  padding: 30rpx;
}

.header_title {
  color: #333;
  font-weight: 700;
  font-size: 35rpx;
}

.header_detail {
  height: 25rpx;
  width: 25rpx;
  margin-left: 15rpx;
  margin-top: 5rpx;
}

.header_address {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

::v-deep .header-location-weixin .header-address .uni-data-tree-dialog {
  padding-bottom: 180rpx !important;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  align-items: center;
}

.align-end {
  display: flex;
  align-items: flex-end;
}

.must-product {
  margin: 20rpx;
  position: relative;
}

.must-more {
  height: 101rpx;
  line-height: 101rpx;
  margin: 0rpx;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  padding: 0rpx 40rpx;
}

.must-more .image-text_6 {
  width: 173rpx;
  height: 51rpx;
}

.must-more .icon_7 {
  width: 33rpx;
  height: 51rpx;
}

.must-more .text-group_6 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 61rpx;
  margin-top: 12rpx;
}

.must-more .text_5 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 61rpx;
  margin-top: 15rpx;
}

.must-list {
  background: #fff;
  padding: 20rpx;
  border-radius: 0rpx 0rpx 28rpx 28rpx;
}

.must-item {
  height: 440rpx;
  background: #fff;
  border: 4rpx solid rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  position: relative;
  margin-right: 12rpx;
  width: 48%;
}

.must-item .must-image {
  height: 342rpx;
  width: 48%;
  border-radius: 20rpx;
}

.product-pic image {
  width: 100%;
  /* height: 260rpx !important; */
}

.product-info .text_name {
  color: #010101;
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置显示的行数 */
  -webkit-box-orient: vertical;
  min-height: 70rpx;
}

.product-info .text_dist {
  padding: 20rpx 0rpx 10rpx 0rpx;
  font-size: 32rpx;
}

.product-info {
  /* box-shadow: 2rpx 4rpx 4rpx 3rpx rgb(0, 0, 0, 0.1); */
  border-radius: 0rpx 0rpx 18rpx 18rpx;
  padding: 0rpx 12rpx;
}

.market_price {
  color: #999999;
  font-size: 24rpx;
  text-decoration: line-through;
}

.seckill-list {
  background: #fff;
  padding: 20rpx;
  border-radius: 0rpx 0rpx 28rpx 28rpx;
}

.seckill-item {
  background: #fff;
  border: 4rpx solid rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  position: relative;
  margin-right: 12rpx;
}

.seckill-item .must-image {
  height: 342rpx;
  width: 258rpx;
  border-radius: 20rpx;
}

.seckill-product-pic image {
  width: 150rpx;
  height: 150rpx;
}

.seckill-product-info .text_name {
  color: #999999;
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置显示的行数 */
  -webkit-box-orient: vertical;
}

.seckill-product-info .text_dist {
  padding: 20rpx 0rpx 10rpx 0rpx;
  font-size: 32rpx;
}

.seckill-time {
  background: #fff;
  padding: 0rpx 42rpx 0rpx 12rpx;
  border-radius: 40rpx 2rpx 40rpx 40rpx;
  height: 48rpx;
  line-height: 48rpx;
  margin-left: 12rpx;
}

.seckill-time text {
  font-size: 24rpx;
  background: #f79e24;
  border-radius: 12rpx;
  color: #fff;
  padding: 0rpx 8rpx;
}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 29vh;
  width: 80rpx;
  height: 80rpx;
  z-index: 999;
  transition: all 0.3s;
  background-color: #fff;
  border-radius: 50%;
  padding: 20rpx;
}

.kefu-container {
  position: fixed;
  right: 30rpx;
  bottom: 35vh;
  width: 80rpx;
  height: 80rpx;
  z-index: 99;
}

/* 客服图标 */
.kefu {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 50%;

  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
}

/* 未读徽章（绝对定位到右上角） */
.unread-badge {
  position: absolute;
  top: -12rpx;
  /* 向上偏移 */
  right: -20rpx;
  /* 向右偏移 */
  min-width: 36rpx;
  height: 36rpx;
  background-color: #e60012;
  /* 红色背景 */
  color: white;
  border-radius: 18rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
  z-index: 100;
  /* 确保徽章在图标上方 */
}

.pop_kefu {
  .load_kefu {
    background-color: #fff;
    width: 80vw;
    height: 20vh;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 100rpx;
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pop_kefulist {
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 130rpx;
    border-radius: 60rpx;
    width: 80vw;

    .pop_list_item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 20rpx;
      border-bottom: #e7e7e7 2rpx solid;

      .pic {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .name {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:last-child {
        border-bottom: none;
      }

      .badge {
        min-width: 36rpx;
        height: 36rpx;
        background-color: #e60012;
        color: white;
        border-radius: 18rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style>
